<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="utf-8"/>
<title>Insert title here</title>
<link th:href="@{/css/bootstrap.css}" rel="stylesheet" type="text/css"/>
<link th:href="@{/css/button.css}" rel="stylesheet" type="text/css"/>
<script th:src="@{/js/jquery-3.2.1.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<style type="text/css">
#jz{
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform:  translateY(-50%);
  -ms-transform:  translateY(-50%);
  -o-transform:  translateY(-50%);
  transform:  translateY(-50%);
}
</style>
</head>
<body>
	<div style="position:absolute;z-index:-1;width:100%;height:100%;">
    	<img th:src="@{img/bg.jpg}" width="100%" height="100%" />
	</div>
	<div class="col-lg-4 col-lg-offset-4 col-sm-6 col-sm-offset-3 col-xs-8 col-xs-offset-2" id="jz">
		<h3 id="orderId">小票号码→<input name="orderId" type="text" placeholder="请输入" size="10"/>
		<a class="button button-glow button-border button-rounded button-primary order-search">搜索</a></h3>
	<div id="order"></div>
	</div>
	
	<div class="modal fade" id="orderModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">  
    <div class="modal-dialog">  
        <div class="modal-content">  
            <div class="modal-header">  
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>  
            </div>  
            <div class="modal-body">  
                <img th:src="@{img/zfm.png}" alt="" style="width:80%;"/>  
            </div>  
            <div class="modal-footer">  
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="complete" type="button" class="btn btn-primary">支付完成</button>  
            </div>  
        </div><!-- /.modal-content -->  
    </div><!-- /.modal-dialog -->  
</div><!-- /.modal -->  
<script type="text/javascript">
/*<![CDATA[*/
	$().ready(function(){
		
		//支付完成
		$('#complete').click(function(){
			var id = $('#id').text();
			$.ajax({
				data : {id : id},
				type : 'post',
				dataType : 'json',
				url : '/order/payComplete',
				success : function(data){
					if(data.success){
						alert("支付完成!");
						window.location.reload();
					}else{
						alert("支付失败！");
					}
				}
			});
		});
		
		//点击支付
		$('body').delegate('.pay','click',function(){
			$("#orderModal").modal("show");
		});
		
		//根据id搜索订单
		$('.order-search').click(function(){
			var html = "";
			$("#order").html(html);
			var id = $("#orderId input[name='orderId']").val();
			$("#orderId input[name='orderId']").val("");
			$.ajax({
				url : '/order/getOrderById',
				data : {id : id},
				dataType : 'json',
				type : 'post',
				success : function(data){
					html += "<p>订单号:&nbsp;&nbsp;<span id='id'>"+ data.id +"</span></p>";
					html += "<p>餐桌名:&nbsp;&nbsp;"+ data.tableName +"</p>";
					html += "<p>点餐时间:&nbsp;&nbsp;"+ data.orderDate +"</p>";
					html += "<p>总金额:&nbsp;&nbsp;"+ data.totalPrice +"</p>";
					html += "<p><a class='button button-primary button-box button-giant button-longshadow-right pay'>支付</a></p>";
					$("#order").html(html);
				},
				error : function(){
					alert("没有对应订单或者订单已支付！");
				}
			 });
		});
	});
/*]]>*/
</script>	
</body>
</html>